<template>
  <div>
    <div class="add-joblevel-box">
      <div style="display: flex;width: 80%">
        <el-input clearable placeholder="输入职称名称" v-model="newJoblevel.name"
                  ref="joblevelInput" size="small" style="margin-right: 20px;width: 45%"></el-input>
        <el-select v-model="newJoblevel.titleLevel" size="small" placeholder="选择职称等级">
          <el-option
              v-for="item in enumLevels"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button icon="el-icon-plus" size="mini" style="margin-left: 20px" type="primary" @click="addJoblevel">添加
        </el-button>
      </div>
    </div>
    <div class="joblevel-table-box">
      <!-- 批量删除 -->
      <el-button type="danger" icon="el-icon-delete" size="small"
                 :disabled="this.multipleSelection.length === 0"
                 @click="multipleDelete"
      >批量删除
      </el-button>
      <el-table :data="joblevelData" style="width: 100%" v-loading="loading" @selection-change="handleSelection">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="ID" width="80">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职称名称" width="160">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职称等级" width="120">
          <template #default="scope">
            <span>{{ scope.row.titleLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="180">
          <template #default="scope">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.enabled?'':'danger'">{{ scope.row.enabled ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="120">
          <template #default="scope">
            <el-button size="mini" @click="editJoblevel(scope.$index, scope.row)"
            >编辑
            </el-button
            >
            <el-button
                size="mini"
                type="danger"
                @click="deleteJoblevel(scope.$index, scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出编辑框 -->
      <el-dialog v-model="dialogVisible" title="更新职位信息">
        <div style="display: flex;flex-wrap: wrap">
          <div style="width: 100%">
            <el-tag style="margin-right: 15px">职称名称</el-tag>
            <el-input v-model="updateJoblevel.name" size="small" style="width: 45%" clearable></el-input>
            <el-select v-model="updateJoblevel.titleLevel" size="small"
                       style="margin-left: 15px" placeholder="选择职称等级">
              <el-option
                  v-for="item in enumLevels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="display: flex;align-items:center;margin-top: 15px;">
            <el-tag style="margin-right: 15px">是否启用</el-tag>
            <el-switch v-model="updateJoblevel.enabled" inline-prompt
                       active-text="启用" inactive-text="禁用" style="margin-top: 10px">
            </el-switch>
          </div>
        </div>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUpdate"
        >确定</el-button
        >
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {deleteRequest, getRequest, postRequest, putRequest} from "@/utils/api";
import {ElMessage, ElMessageBox} from "element-plus";
import {Timer} from '@element-plus/icons'
export default {
  name: "JoblevelManage",
  components:{
    Timer
  },
  created() {
    this.initJoblevel();
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      enumLevels: [
        {label: '正高级', value: '正高级'},
        {label: '副高级', value: '副高级'},
        {label: '初级', value: '初级'},
        {label: '中级', value: '中级'}
      ],
      newJoblevel: {
        name: '',
        titleLevel: ''
      },
      updateJoblevel: {
        id: '',
        name: '',
        titleLevel: '',
        enabled:''
      },
      joblevelData: [],
      multipleSelection: []
    }
  },
  methods: {
    // 初始化职位表格数据
    initJoblevel() {
      this.newJoblevel.name = '';
      this.newJoblevel.titleLevel = '';
      this.loading = true;
      getRequest('/system/basic/joblevel/').then(res => {
        if (res) {
          this.joblevelData = res;
          this.loading = false;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    addJoblevel() {
      if (this.newJoblevel.name.trim() !== '' && this.newJoblevel.titleLevel) {
        postRequest('/system/basic/joblevel/', this.newJoblevel).then(res => {
          this.initJoblevel();
        })
      } else {
        ElMessage.error('添加信息不能为空');
        this.$refs["joblevelInput"].focus();
      }
    },
    editJoblevel(index, row) {
      this.dialogVisible = true;
      this.updateJoblevel.id = row.id;
      this.updateJoblevel.name = row.name;
      this.updateJoblevel.titleLevel = row.titleLevel;
      this.updateJoblevel.enabled = row.enabled;
    },
    confirmUpdate() {
      if (this.updateJoblevel.name.trim() !== '') {
        putRequest('/system/basic/joblevel/', this.updateJoblevel).then(res => {
          this.dialogVisible = false;
          this.initJoblevel();
        })
      } else {
        ElMessage.error('更新职称信息不能为空');
      }
    },
    deleteJoblevel(index, row) {
      ElMessageBox.confirm(
          '此操作将永久删除本条记录，是否继续？',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            deleteRequest('/system/basic/joblevel/' + row.id).then(res => {
              this.initJoblevel();
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
            this.initJoblevel();
          })

    },
    handleSelection(val) {
      this.multipleSelection = val;
    },
    multipleDelete() {
      ElMessageBox.confirm(
          `此操作将永久删除${this.multipleSelection.length}条记录，是否继续？`,
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            let ids = '?';
            if (this.multipleSelection.length) {
              this.multipleSelection.forEach(item => {
                ids += 'ids=' + item.id + '&';
              })
              deleteRequest('/system/basic/joblevel/' + ids).then(res => {
                this.initJoblevel();
              })
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
            this.initJoblevel();
          })

    }
  }
}
</script>

<style scoped>
.add-joblevel-box {
  margin-top: 15px;
}

.joblevel-table-box {
  margin-top: 40px;
}
</style>
